<template>
	<view class="add">
		<dwu-navbar title="填写订单"></dwu-navbar>
		<view class="form">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="auto">
				<u-form-item label="订单类型" prop="service_id" borderBottom>
					<text class="must">*</text>
					<dwu-picker :disabled="disabled" placeholder="请选择订单类型" keyName="title" keyVal="id"
						:defaultVal="form.service_id" :columns="serviceTypeList"
						@onconfirm="confirmServiceType"></dwu-picker>
				</u-form-item>
				<u-form-item label="订单地址" prop="address" borderBottom>
					<text class="must">*</text>
					<dwu-chooseLocation :disabled="disabled" :defaultVal="form.address" placeholder="请选择订单地址"
						@onconfirm="confirmAddress"></dwu-chooseLocation>
				</u-form-item>
				<u-form-item label="联系人姓名" prop="name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.name" border="none"
						placeholder="请输入联系人姓名"></u--input>
				</u-form-item>
				<u-form-item label="联系人电话" prop="phone" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" type="number" v-model="form.phone" maxlength="11"
						border="none" placeholder="请输入联系人电话"></u--input>
				</u-form-item>
				<u-form-item label="期待上门时间" prop="call_time">
					<text class="must">*</text>
					<dwu-appointmenttime-picker :defaultVal="form.call_time" placeholder="请选择期待上门时间"
						@onconfirm="confirmCallTime"></dwu-appointmenttime-picker>
				</u-form-item>
			</u--form>
		</view>
		<!-- <liu-delivery-time @change="changeTime" ref="chooseTime" title="请选择预约时间"></liu-delivery-time> -->
		<view class="certification-title">
			报修信息
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="auto">
				<u-form-item label="分类" prop="repair_id" borderBottom>
					<text class="must">*</text>
					<dwu-picker :disabled="disabled" placeholder="请选择分类" keyName="title" keyVal="id"
						:defaultVal="form.repair_id" :columns="repairTypeList"
						@onconfirm="confirmRepairType"></dwu-picker>
				</u-form-item>
				<u-form-item label="品牌" prop="brand_name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.brand_name" border="none"
						placeholder="请输入品牌"></u--input>
				</u-form-item>
				<u-form-item label="设备数量" prop="facility_sum">
					<text class="must">*</text>
					<u--input inputAlign="right" type="number" :readonly="disabled" v-model="form.facility_sum"
						border="none" placeholder="请输入设备数量"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="certificate">
			<view class="certificate-title">
				<view class="left">故障描述<text class="must">*</text></view>
				<view class="right"></view>
			</view>
			<u--input v-model="form.breakdown_describe" :readonly="disabled" border="none"
				placeholder="请输入故障描述"></u--input>
		</view>
		<view class="certification-title">
			附件上传<text class="must">*</text>
		</view>
		<view class="file-list">
			<view class="file-item" v-for="(item,index) in attachments_imgs" :key="index">
				<image class="upload-img" :src="item" mode="" @tap="previewImage(item)"></image>
			</view>
			<view class="file-item upload" @click="choosePhoto">
				<image class="upload-icon" src="@/static/user/upload_icon.png" mode=""></image>
			</view>
		</view>
		<view class="submit" @click="onSubmit">
			提交订单
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					attachments_img: ''
				},
				attachments_imgs: [],
				serviceTypeList: [],
				repairTypeList: []
			};
		},
		onLoad(opeions) {
		
			this.getServiceType()
			this.getRepairType()
			console.log(opeions)
			
			if(opeions.address) {
				this.form.address     = opeions.address
				this.form.address_lat = opeions.latitude
				this.form.address_lng = opeions.latitude
				this.form.city        = opeions.cityde
			}
			
			if (opeions.id) {
				this.form.id = opeions.id
				setTimeout(()=>{
					this.getOrderDetail()
				},500)
			}
		},
		methods: {
			previewImage(e){
				uni.previewImage({
					current:e,
					urls: this.attachments_imgs
				})
			},
			getOrderDetail() {
				this.request.http('/order/orderDetail', 'post', {
					id: this.form.id
				}).then(res => {
					let data = res.data
				
					if (data.code == 1) {
						this.form.service_id = data.data.service_id
						this.form.service_name = data.data.service_name
						this.form.address = data.data.address
						this.form.address_lat = data.data.address_lat
						this.form.address_lng = data.data.address_lng
						this.form.name = data.data.name
						this.form.phone = data.data.phone
						this.form.repair_id = data.data.repair_id
						this.form.repair_name = data.data.repair_name
						this.form.brand_name = data.data.brand_name
						this.form.breakdown_describe = data.data.breakdown_describe
						this.form.call_time = data.data.call_time_text
						this.form.city = data.data.city
						this.form.facility_sum = data.data.facility_sum
						this.form.attachments_img = data.data.attachments_img
						this.attachments_imgs = data.data.attachments_img.split(',')
						// this.orderDetail = data.data
						// this.orderDetail.imgs = this.orderDetail.attachments_img ? this.orderDetail.attachments_img
						// 	.split(',') : []
						// this.amap.getAddressByLatLng(data.data.address_lat, data.data.address_lng).then(
						// 	ress => {
						// 		this.orderDetail.analysis_address = ress.formatted_address
						// 		this.orderDetail.analysis_area = ress.aois[0].name
						// 		this.$forceUpdate()
						// 	})
					}
				})
			},
			getServiceType() {
				this.request.http('/index/getServiceType', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.serviceTypeList = [data.data]
					}
				})
			},
			getRepairType() {
				this.request.http('/index/getRepairType', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.repairTypeList = [data.data]
					}
				})
			},
			confirmServiceType(e) {
				this.form['service_id'] = e.value[0].id
				this.form['service_name'] = e.value[0].title
			},
			confirmAddress(e) {
				this.form['address'] = e.address
				this.form['address_lat'] = e.latitude
				this.form['address_lng'] = e.longitude
				this.amap.getAddressByLatLng(e.latitude, e.longitude).then(ress => {
					let addressComponent = ress.addressComponent
					// let aois = ress.aois
					// this.selectVal = addressComponent.province + addressComponent.city + addressComponent.district
					this.form['city'] = addressComponent.city
				})
			},
			confirmCallTime(e) {
				this.form['call_time'] = e.value
			},
			confirmRepairType(e) {
				this.form['repair_id'] = e.value[0].id
				this.form['repair_name'] = e.value[0].title
			},
			choosePhoto(type) {
				if (this.disabled) return
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.upload.file('/Common/upload', res.tempFilePaths[0], 'file')
							.then(file => {
								uni.hideLoading()
								file = JSON.parse(file)
								if (file.code == 1) {
									// this.form['attachments_img'] = file.data.fullurl
									this.attachments_imgs.push(file.data.fullurl)
									uni.showToast({
										title: '上传成功'
									})
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							})
					}
				})
			},
			onSubmit() {
				let form = this.form
				if (!form.service_id) {
					uni.showToast({
						icon: 'none',
						title: '请选择订单类型'
					})
					return
				}
				if (!form.address) {
					uni.showToast({
						icon: 'none',
						title: '请选择订单地址'
					})
					return
				}
				if (!form.name) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人姓名'
					})
					return
				}
				if (!form.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人电话'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(form.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确联系人电话'
					})
					return
				}
				if (!form.call_time) {
					uni.showToast({
						icon: 'none',
						title: '请选择期待上门时间'
					})
					return
				}
				if (!form.repair_id) {
					uni.showToast({
						icon: 'none',
						title: '请选择分类'
					})
					return
				}
				if (!form.brand_name) {
					uni.showToast({
						icon: 'none',
						title: '请输入品牌'
					})
					return
				}
				if (!form.facility_sum) {
					uni.showToast({
						icon: 'none',
						title: '请输入设备数量'
					})
					return
				}
				if (!form.breakdown_describe) {
					uni.showToast({
						icon: 'none',
						title: '请输入故障描述'
					})
					return
				}
				if (this.attachments_imgs == 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传附件'
					})
					return
				}
				if (form.id) {
					this.request.http('/Order/updateOrder', 'post', {
						id: form.id,
						service_id: form.service_id,
						service_name: form.service_name,
						address: form.address,
						address_lat: form.address_lat,
						address_lng: form.address_lng,
						name: form.name,
						phone: form.phone,
						repair_id: form.repair_id,
						repair_name: form.repair_name,
						brand_name: form.brand_name,
						breakdown_describe: form.breakdown_describe,
						attachments_img: this.attachments_imgs.join(','),
						call_time: form.call_time,
						city: form.city,
						facility_sum: form.facility_sum,
					}).then(res => {
						let data = res.data
						if (data.code == 1) {
							uni.navigateBack()
						}
					})
				} else {
					this.request.http('/Order/addOrder', 'post', {
						service_id: form.service_id,
						service_name: form.service_name,
						address: form.address,
						address_lat: form.address_lat,
						address_lng: form.address_lng,
						name: form.name,
						phone: form.phone,
						repair_id: form.repair_id,
						repair_name: form.repair_name,
						brand_name: form.brand_name,
						breakdown_describe: form.breakdown_describe,
						attachments_img: this.attachments_imgs.join(','),
						call_time: form.call_time,
						city: form.city,
						facility_sum: form.facility_sum,
					}).then(res => {
						let data = res.data
						if (data.code == 1) {
							uni.redirectTo({
								url: '/subpackage/order/publishList'
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.add {
		padding: 24rpx 20rpx 60rpx;

		.certification-title {
			padding-left: 26rpx;
			margin-top: 34rpx;
			margin-bottom: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #474747;
			line-height: 42rpx;
			.must {
				position: relative;
				top: -4rpx;
				margin-left: 6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}
		}

		.form {
			padding: 16rpx 25rpx;
			background-color: #fff;
			border-radius: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #313131;

			/deep/.u-form-item__body__left__content__label {
				font-size: 27rpx;
				color: #313131;
			}

			input {
				padding-right: 30rpx;
				font-weight: 400;
				font-size: 27rpx !important;
			}

			/deep/.u-form-item {
				position: relative;
			}

			.must {
				position: absolute;
				top: 28rpx;
				margin-left: -6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}
		}

		.certificate {
			margin: 18rpx 0;
			padding: 34rpx 25rpx;
			background-color: #fff;

			.certificate-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 27rpx;
					color: #313131;

					.must {
						margin-left: 6rpx;
						color: #D55252;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 26rpx;
						height: 26rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #B0DD67;
					}
				}
			}

			.certificate-list {
				margin-top: 34rpx;

				.certificate-item {
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						display: block;
						width: 587rpx;
						height: 88rpx;
						background: #F6F7FB;
						border-radius: 19rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #333333;
						line-height: 88rpx;
						text-align: center;
					}

					image {
						margin-left: 26rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}


			input {
				margin-top: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx !important;
			}
		}

		.file-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.file-item {
				width: 205rpx;
				height: 205rpx;
				border-radius: 38rpx;
				overflow: hidden;
				margin-right: 30rpx;
				margin-bottom: 30rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.upload-img {
					width: 100%;
					height: 100%;
				}

				&.upload {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);

					.upload-icon {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		.submit {
			margin: 100rpx auto 0;
			width: 523rpx;
			height: 81rpx;
			background: #3D3D3D;
			border-radius: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #B0DD67;
			line-height: 81rpx;
			text-align: center;
		}
	}
</style>